<template>
    <h3>我是APP组件(祖)</h3>
</template>


<script>
/*TODO
* 响应式数据的判断
* 1. isRef:检查一个值是否为ref对象
* 2.isReactive:检查一个值是否由reactive创建的响应式代理
* 3.isReadonly:检查一个对象是否由readonly创建的只读代理
* 4.isProxy:检车一个对象是否由reactive或者readonly方法创建的代理
* */
import {ref,readonly,reactive, toRefs,isReactive,isReadonly,isRef,isProxy} from "vue";

export default {
  name: 'App',
  setup() {
    let car = reactive({name: '奔驰', price: '40w'})
    let sum = ref(0)
    let car2=readonly(car)
    console.log(isRef(sum))//true
    console.log(isReactive(car))//true
    console.log(isReadonly(car2))//true
    console.log(isProxy(car))//true
    console.log(isProxy(sum))//false
    //此处展现的也是proxy的代理对象,知识不可修改了而已
    console.log(isProxy(car2))//true


    return {...toRefs(car)}


  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
